<template>
  <div
    v-if="isTabBar"
    :style="navStyle"
    class="header flex items-center justify-between bg-white"
  >
    <img :src="HeaderLogo" class="h-38px" />
    <div class="msg_bg ml-91px" v-show="isBusiness && show" @click="showCard">
      <Badge dot class="h-20px">
        <img :src="require('@/assets/icon/icon_msg.png')" class="h-20px" />
      </Badge>
    </div>
    <img @click="handleLeftClick" :src="HeaderClose" class="h-30px" />
  </div>
  <div v-else :style="navStyle">
    <NavBar
      :title="navTitle"
      left-arrow
      :placeholder="true"
      :class="{ 'view-nav': isView }"
      :style="{ backgroundColor: this.bgColor }"
      @click-left="handleLeftClick"
    />
  </div>
</template>

<script>
import { NavBar, Badge } from "vant";
import HeaderLogo from "@/assets/icon/header_logo.png";
import HeaderClose from "@/assets/icon/header_close.png";
import Bus from "@/config/evenrBus";
import { isPlus } from "@/utils/tools";
export default {
  name: "ll-nav-bar",
  components: {
    NavBar,
    Badge,
  },
  props: {
    bgColor: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    leftClick: {
      type: Function,
    },
  },
  data() {
    return {
      HeaderLogo,
      HeaderClose,
      show: false,
      isApp: false,
    };
  },
  computed: {
    isTabBar() {
      return ["/workbench", "/business"].includes(this.$route.path);
    },
    isBusiness() {
      return ["/business"].includes(this.$route.path);
    },
    isView() {
      return this.bgColor !== "";
    },
    navStyle() {
      if (this.isApp) {
        if (this.bgColor) {
          return { backgroundColor: this.bgColor, paddingTop: "44px" };
        } else {
          return { backgroundColor: "#fff", paddingTop: "44px" };
        }
      } else {
        return {};
      }
    },
    navTitle() {
      return this.title || this.$route.meta.title || "CRM系统";
    },
  },
  async mounted() {
    this.isApp = await isPlus();
    Bus.$on("ShowCard", this.ShowCardTag);
  },
  methods: {
    handleLeftClick() {
      if (this.leftClick) {
        this.leftClick();
      } else {
        uni.webView.getEnv((res) => {
          if (res.plus) {
            uni.navigateBack();
          } else {
            this.$router.back();
          }
        });
      }
    },
    showCard() {
      Bus.$emit("handleShowCard");
      // this.$emit("handleShowCard");
    },
    ShowCardTag(val) {
      this.show = val;
      console.log("0000");
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  padding: 0 14px;
  .msg_bg {
    width: 30px;
    height: 30px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.view-nav {
  ::v-deep {
    .van-nav-bar__arrow {
      color: #ffffff;
    }
    .van-nav-bar__title {
      color: #ffffff;
    }
    .set__nav__bar__bg::before {
      content: "";
      position: absolute;
      right: -5px;
      top: 10px;
      width: 184px;
      height: 158px;
      background: url("@/assets/workbench/view/view-bg.png") no-repeat;
      background-position: center top;
      background-size: 100% 100%;
    }
  }
}
</style>
